.play-songs-list-container {
	width: 100%;
	height: 100%;
	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.content {
		width: 35%;
		height: 80%;
		color: $common-white-color;
		position: absolute;
		top: 20px;
		right: 0;
		background-color: #2D2D37;
		transition: all 0.3s ease-in-out;
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
		border-top-left-radius: 6px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		transform: translateX(100%);
		opacity: 0;
		z-index: 2;
		.top {
			padding: 15px;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			.text {
				font-size: 20px;
				margin-right: 5px;
			}
			.num {
				color: #95959A;
			}
			i {
				font-size: 20px;
				color: #95959A;
				cursor: pointer;
				transition: all 0.2s;
				&:hover {
					color: $common-white-color;
				}
			}
		}
		.list {
			width: 100%;
			padding: 15px 0;
			.item {
				padding: 5px 15px;
				transition: all 0.2s;
				&:hover {
					background-color: rgba(255, 255, 255, 0.1);
					.cover-box {
						&::after{
							opacity: 1;
						}
					}
					.cover-box i {
						opacity: 1;
					}
				}
				.cover-box {
					width: 55px;
					height: 55px;
					position: relative;
					transition: all 0.2s;
					&::after {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-color: rgba(0, 0, 0, 0.3);
						opacity: 0;
					}
					i {
						position: absolute;
						font-size: 22px;
						color: $common-white-color;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						opacity: 0;
						transition: all 0.2s;
						cursor: pointer;
						z-index: 1;
					}
					.cover {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	.content-active {
		transform: translateX(0);
		opacity: 1;
	}
}